<template>
  <div>
    <a-spin :spinning="loading">
      <!-- <div style="margin-bottom:16px;">
      <a-button type="primary" @click="showModal" style="margin-right:20px;">选班调班</a-button>
      <a-radio-group v-model="value" @change="seletClass" :defaultValue="value">
        <a-radio-button value="1">当前报读班级</a-radio-button>
        <a-radio-button value="2">历史报读班级</a-radio-button>
      </a-radio-group>
      </div>-->

      <a-modal
        title="结课提醒"
        :visible="endCourseVisible"
        :confirm-loading="endCourseConfirmLoading"
        @ok="handleOk"
        @cancel="cancelModal"
      >
        <div>
          你正在对
          <a>{{studentInfo.name}}</a>的
          <a>{{modelData.course.name}}</a>进行结课操作。结课后，系统将进行如下处理，请仔细阅读并确认。
        </div>
        <div class="end-courser-body">
          <div>
            1、学员在该课程下的所有
            <span class="color-red">剩余课时将清零</span> ；
          </div>
          <div>
            2、学员将被移出
            <span class="color-red">对应班级</span>， 且已结课的课程不能参与后续教学流程（如点名、分班、排课、续费预警等）；
          </div>
          <div>
            3、相关
            <span class="color-red">点名记录、缺课记录、退转课记录将被锁定</span> ；
          </div>
          <!-- <div>4、学员在该课程下如有超上的课时，将作忽略处理；</div> -->
        </div>
      </a-modal>
      <div style="text-align: right;padding-bottom:10px;">
        <a-checkbox :defaultChecked="true" @change="hideCourse" v-if="endCourseFlag">隐藏「已结课」课程</a-checkbox>
      </div>
      <div v-if="result.length>0">
        <div
          class="course-item-box"
          v-for="(item,index) in result"
          :key="index"
          v-if="!ischecked&&item.ending_flag==1||item.ending_flag==0"
        >
          <div class="info-header">
            <div class="info-title">
              <div style="font-size:16px">
                <a-tag color="#108ee9" v-if="item.course.type==1">1v1</a-tag>
                <a-tag color="#108ee9" v-if="item.course.type==2">1vN</a-tag>
                {{item.course.name}}
                <span v-if="item.ending_flag==1">(已结课)</span>
              </div>
              <div>
                <span v-if="item.ending_flag==0">
                  <a-button class="mr8" @click="transformCourse(item)">转课</a-button>
                  <a-button class="mr8" @click="returnCourse(item)">退课</a-button>
                  <a-button class="mr8" @click="endCourse(item)">结课</a-button>
                </span>

                <a-dropdown v-if="item.have_ending_history==1">
                  <a-button>...</a-button>
                  <a-menu slot="overlay">
                    <a-menu-item @click="classEendingList(item)">结课记录</a-menu-item>
                  </a-menu>
                </a-dropdown>
              </div>
            </div>
            <div>
              <a-row>
                <a-col :span="12" style="padding:10px 0 3px 0px;">
                  <div style="margin-bottom:5px;">
                    <span style="color:#666;">所在校区：</span>
                    <span style="margin-right:8px">{{item.structures.name}}</span>
                  </div>
                  <div style="margin-bottom:5px;" v-if="item.sum_time!=null" class="ant-row-flex">
                    <div>
                      <span style="color:#666;">剩余天数：</span>
                      <span style="margin-right:8px">{{item.sum_time}}天</span>
                    </div>

                    <span v-if="item.sum_exceed_time!=null&&item.sum_exceed_time!=0">
                      超上天数
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span>学员在剩余天数不足的情况下继续上课，多上的课时记为超上天数，请及时联系学员续费并进行补扣</span>
                        </template>
                        <a-icon type="question-circle" style="margin-left:3px" />
                      </a-tooltip>
                      ：{{item.sum_exceed_time}}天
                      <a style="margin-left:3px" @click="clickHander">去处理></a>
                    </span>

                    <!-- <span><a>停课</a></span> -->
                  </div>
                  <div v-if="item.sum_hour!=null" class="ant-row-flex" style="margin-bottom:5px;">
                    <div>
                      <span style="color:#666;">剩余课时：</span>
                      <span style="margin-right:8px">{{item.sum_hour}}课时</span>
                    </div>

                    <span v-if="item.sum_exceed_hour!=null&&item.sum_exceed_hour!=0">
                      超上课时
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span>学员在剩余课时不足的情况下继续上课，多上的课时记为超上课时，请及时联系学员续费并进行补扣</span>
                        </template>
                        <a-icon type="question-circle" style="margin-left:3px" />
                      </a-tooltip>
                      ：{{item.sum_exceed_hour}}课时
                      <a
                        style="margin-left:3px"
                        @click="clickHander"
                      >去处理></a>
                    </span>
                    <div v-if="item.hour_due_flag">
                      <span >课时到期时间：</span>
                      <template v-if="!item.last_hour_due_time">
                          <span style="color:#999;">请在下方订单明细中设置</span>
                      </template>
                      <template v-else>
                          <span style="margin-right: 8px;">{{item.last_hour_due_time}}</span>
                          <span v-if="item.is_hour_due" style="color:color: #ec4b35;margin-left: 3px;">已到期</span>
                      </template>
                    </div>
                  </div>
                </a-col>
                <!-- <a-col :span="12" v-if="item.sum_time!=null">
                  <span>天数到期时间：</span>
                  <span style="color:#999;">请在下方订单明细中设置</span>
                </a-col>-->
              </a-row>
            </div>
            <div>
              <span>所在班级：</span>
              <span v-if="item.class.length>0&&item.class" style="margin-right:10px;">
                <span v-for="(val,i) in item.class" :key="i">
                  <a @click="$router.push({name:'class_info',query:{id:val.id}})">{{val.name}}</a>
                  <span v-if="i!=item.class.length-1" style="color: #ccc;margin: 3px;">|</span>
                </span>
              </span>
              <a @click="goSelectClass(item)" v-if="item.course.type==2">去选班></a>
            </div>
          </div>
          <div class="info-footer">
            <a-table
              :columns="columns"
              :data-source="item.order_content"
              :pagination="{'hideOnSinglePage':true}"
            >
              <span slot="order_no" slot-scope="text,record">
                <a
                  @click="$router.push({name:'orderdetails',query:{id:record.order.id}})"
                >{{record.order.order_no}}</a>
              </span>
              <span slot="buy_number" slot-scope="text,record">
                <span>
                  {{record.buy_number}}
                  <span v-if="record.price_type==1">课时</span>
                  <span v-if="record.price_type==2">天</span>
                </span>
              </span>
              <span slot="give_number" slot-scope="text,record">
                <span>
                  {{record.give_number}}
                  <span v-if="record.price_type==1">课时</span>
                  <span v-if="record.price_type==2">天</span>
                </span>
              </span>
              <span slot="consume" slot-scope="text,record">
                <span>
                  {{Number(record.buy_number+record.give_number)-Number(record.surplus_buy_number+record.surplus_give_number)}}
                  <span
                    v-if="record.price_type==1"
                  >课时</span>
                  <span v-if="record.price_type==2">天</span>
                </span>
              </span>
              <span
                slot="surplus_number"
                slot-scope="text,record"
              >{{record.price_type==1?Number(record.surplus_buy_number+record.surplus_give_number)+'课时':Number(record.surplus_buy_number+record.surplus_give_number)+'天'}}</span>

              <span slot="setdate" slot-scope="text,record,index">
                <!-- <span v-if="record.price_type==2">
                  <span
                    v-if="record.buy_start_time"
                  >{{record.buy_start_time}} ~ {{record.buy_end_time}}</span>
                </span>
                <span v-else>-</span>-->
                <!-- 可以设置日期 -->
                <!-- {{record}} -->
                <span v-if="record.price_type==2">
                  <span v-if="(record.surplus_buy_number||record.surplus_give_number)&&!record.buy_start_time">
                     <span v-if="!record.flag">
                       <span>未设置起止日期</span>
                        <span style="margin-left:12px;cursor: pointer;" @click="changeFlag(record)">
                          <a-icon type="edit" />
                        </span>
                     </span>
                     <span v-if="record.flag">
                       <a-date-picker
                        style="width:120px;"
                        v-model="setStartDate"
                        @change="setDate(record,$event)"
                        :allowClear="false"
                      />-
                      <span>{{record.autodate?record.autodate:record.buy_end_time||'自动推算结束日期'}}</span>
                      <span
                        style="margin-left:8px;cursor: pointer;"
                        @click="changeFlagSubmit(record)"
                      >
                        <a-icon type="check" />
                      </span>
                     </span>
                  </span>
                  <span v-else-if="(record.surplus_buy_number||record.surplus_give_number)&&record.buy_start_time">
                      <span>{{record.buy_start_time}} - {{record.buy_end_time}}</span>
                 </span>
                 <span v-else>-</span>
                 </span>
                <span v-if="record.price_type==1&&item.hour_due_flag">
                  <span v-if="!record.hour_due_time">
                    <span v-if="!record.flag">
                      未设置有效期
                      <span style="margin-left:12px;cursor: pointer;" @click="timevalidity(record)">
                          <a-icon type="edit" />
                      </span>
                    </span>
                    <span v-if="record.flag">
                      <a-date-picker @change="timeDateChange($event,record)" :allowClear="false"/>
                      <a-icon type="check" style="margin-left:8px;cursor: pointer;" @click="timeSumit(record)"/>
                    </span>
                  </span>
                  <span v-if="record.hour_due_time">
                     <span v-if="!record.flag">
                       <span>
                          {{record.hour_due_time}}
                          <span style="padding-left:5px;">到期</span>
                       </span>
                       <a-icon type="edit"  @click="haveTimevalidity(item,record)" style="margin-left:8px;"/>
                     </span>
                     <span v-if="record.flag">
                       <a-date-picker @change="timeDateChange($event,record)" :allowClear="false" v-model="record.moment_last_hour_due_time"/>
                       <a-icon type="check" style="margin-left:8px;cursor: pointer;" @click="timeSumit(record,true)"/>
                     </span>
                  </span>
                </span>
                <span v-else>-</span>
              </span>
              <span slot="action" slot-scope="text,record">
                <a
                  @click="clear(record.id,record.project.id)"
                  v-if="Number(record.surplus_buy_number+record.surplus_give_number)>0"
                >课时清零</a>
                <span v-else>-</span>
              </span>
            
            </a-table>
          </div>
        </div>
      </div>
      <div v-else>
        <a-empty :image="simpleImage" />
      </div>
    </a-spin>

    <a-modal
      title="选择班级"
      :visible="classvisible"
      :confirm-loading="classconfirmLoading"
      @ok="seletedClass"
      @cancel="classCancel"
    >
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="班级">
          <a-select placeholder="请选择班级" v-model="class_ids" mode="multiple" allowClear>
            <a-select-option
              :value="item.id"
              v-for="(item,index) in classlist"
              :key="index"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 冲突 -->
    <a-modal
      title="学员冲突"
      :visible="studentVisible"
      @ok="studentOk"
      @cancel="studentCancel"
      okText="忽略冲突"
      okType="danger"
      :zIndex="1100"
    >
      <div class="title">
        <div class="title-left">
          <a-icon type="warning" style="margin-right:8px;color:#fdaba9;" theme="filled" />排课冲突提示
        </div>
        <div class="title-right" style="cursor: pointer;" @click="addConflictTest">检测冲突</div>
      </div>
      <div class="datas">
        <div style="color:#f14133;">
          <a-icon type="warning" style="margin-right:8px;" theme="filled" />
          学员冲突({{conflict.length}})
        </div>
        <div
          v-for="(item,index) in conflict"
          :key="index"
          style="padding-left:10px;margin-top: 10px;margin-bottom: 24px;"
        >
          <div>
            <span v-for="(val,i) in item.class.student" :key="i">
              {{val.name}}
              <span v-if="i<item.class.student.length-1">，</span>
            </span>
          </div>
          <div>{{item.class.name}}</div>
          <div>
            {{item.start_time|dayc|weeks}}
            <span
              style="color:#999"
            >{{item.class_start_time}} ~ {{item.class_end_time}}</span>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 结课记录 -->
    <a-modal title="结课提醒" :visible="endListVisible" @cancel="endClassCancel" :footer="null">
      <!-- <div>“已结课”的课程进行续费或转课后会变回“正常”状态，再次结课后会增加1条结课记录。</div> -->
      <div v-if="endList !=''">
        <div
          class="end-list"
          :class="{active:item.is_revoke==1?true:false}"
          v-for="(item,index) in endList"
          :key="index"
        >
          <div class="item-left">
            <div>
              <span>结课时间：{{item.created_at|formatDate}}</span>
              <span>操作人：{{item.user_school.name}}</span>
            </div>
            <div>
              <span>
                结课消耗：{{item.number}}
                <span v-if="item.type==2">天</span>
                <span v-if="item.type==1">课时</span>
              </span>
            </div>
          </div>
          <div class="item-right">
            <a-button @click="cancelEndClass(item)" v-if="item.is_revoke==2&&item.course!=null">撤销结课</a-button>
            <a-button disabled v-if="item.is_revoke==1&&item.course!=null">已撤销</a-button>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  readCourse,
  clearClassHour,
  studentEndCourse,
  endingList,
  revokeEndCourse,
  studentToHistory,
  setStartEndDate,
  checkDateStatus,
  setHourTime
} from '@/api/student'
import { classList, seletedClass, checkStudent } from '@/api/class'
import { Empty } from 'ant-design-vue'
import moment from 'moment'
import es from 'ant-design-vue/es'
export default {
  name: 'schedule',
  data() {
    return {
      endList: [],
      endListVisible: false,
      studentVisible: false,
      conflict: [],
      autodate: null,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      loading: true,
      isshow: true,
      //   value: 1,
      endCourseVisible: false,
      endCourseConfirmLoading: false,
      endCourseFlag: false,
      classvisible: false,
      classconfirmLoading: false,
      classlist: [],
      class_ids: [],
      course_id: undefined,
      //表格
      columns: [
        {
          title: '订单号',
          // dataIndex: 'name',
          width: 300,
          ellipsis: true,
          scopedSlots: { customRender: 'order_no' },
        },
        {
          title: '购买数量',
          // dataIndex: 'name',
          ellipsis: true,
          width: 147,
          scopedSlots: { customRender: 'buy_number' },
        },
        {
          title: '赠送数量',
          ellipsis: true,
          width: 147,
          scopedSlots: { customRender: 'give_number' },
        },
        {
          title: '已消耗数量',
          // dataIndex: 'name',
          ellipsis: true,
          width: 147,
          scopedSlots: { customRender: 'consume' },
        },
        // {
        //   title: '退转数量'

        // },
        {
          title: '剩余数量',
          // dataIndex: 'name',
          ellipsis: true,
          width: 147,
          scopedSlots: { customRender: 'surplus_number' },
        },
        {
          title: '课程起止日期',
          width: 400,
          scopedSlots: { customRender: 'setdate' },
        },
        {
          title: '操作',
          // dataIndex: 'name',
          width: 150,
          scopedSlots: { customRender: 'action' },
        },
      ],
      chargedata: [],
      result: [
        // {
        //   surplus_time:{
        //      type:null
        //   },
        //   class:[],
        //   order:[]
        // }
      ],
      structures_id: null,
      modelData: { course: {}, structures: {} },
      ischecked: true,
      setStartDate: undefined,
    }
  },
  props: ['studentId', 'studentInfo'],

  created() {
    this.getcharge()
    // console.log(11111111);
  },
  methods: {
    haveTimevalidity(item,record){
      record.flag=true;
      // console.log(data.flag,3);
      record.moment_last_hour_due_time=moment(item.last_hour_due_time)
      console.log(item,9);
      this.$forceUpdate()
    },
    timevalidity(data){
      data.flag=true;
      this.$forceUpdate()
      console.log(data);
    },
    timeSumit(data,isEdit=false){
      let parmars={}
      if(!isEdit){
        if(!data.hour_due_time){
          this.$message.error('有效日期不能为空')
          return
        }
        parmars.hour_due_time=data.hour_due_time
        
      }
      if(isEdit){
         let hour_due_time=moment(data.moment_last_hour_due_time).format('YYYY-MM-DD')
        parmars.hour_due_time=hour_due_time
      }
        setHourTime(parmars,data.id).then(res=>{
          this.$message.success('修改成功')
          this.getcharge()
        }).catch(err=>{
          this.$message.error(err.data.message||'修改失败')
        })
    },
    timeDateChange(date,data){
      let hour_due_time=moment(date).format('YYYY-MM-DD')
      data.hour_due_time=hour_due_time
      // console.log(date,data,11);
    },
    hideCourse(e) {
      console.log(e.target.checked)
      this.ischecked = e.target.checked
    },
    getcharge() {
      this.loading = true
      readCourse(this.studentId)
        .then((res) => {
          this.result = res
          for (let i = 0; i < this.result.length; i++) {
            if (this.result[i].ending_flag == 1) {
              this.endCourseFlag = true
              return
            } else {
              this.endCourseFlag = false
            }
          }
          this.result.forEach((item) => {
            //   if (item.ending_flag == 1) {
            //     this.endCourseFlag = true
            //   } else {
            //     this.endCourseFlag = false
            //   }

            item.order_content.forEach((val) => {
              val.flag = false
              val.autodate = null
            })
          })
          console.log(this.endCourseFlag, '22222')
        })
        .finally(() => {
          this.loading = false
        })
        .catch((err) => {
          this.$message.error(err.data.message || '报读课程获取失败')
        })
    },
    endCourse(data) {
      this.endCourseVisible = true
      this.modelData = data
    },
    cancelModal() {
      this.endCourseVisible = false
    },
    handleOk() {
      this.endCourseConfirmLoading = true
      studentEndCourse(this.studentId, {
        course_id: this.modelData.course.id,
        structures_id: this.modelData.structures.id,
      })
        .then((res) => {
          this.endCourseVisible = false
          this.endCourseConfirmLoading = false
          let that = this
          if (res.flag == 1) {
            this.$confirm({
              title: '是否转为历史学员?',
              content: `学员${this.studentInfo.name}所有课程都已结课，是否转为历史学员？`,
              okText: '转为历史学员',
              cancelText: '暂不处理',
              onOk() {
                studentToHistory(that.studentInfo.id)
                  .then((res) => {
                    that.getcharge()
                    that.$message.success('转为历史学员成功')
                    that.$emit('updateStudent')
                  })
                  .catch((err) => {
                    that.$message.error(err.data.message || '转为历史学员失败')
                  })
              },
              onCancel() {
                that.getcharge()
                console.log('Cancel')
              },
            })
          } else {
            this.getcharge()
          }
        })
        .catch((err) => {
          this.endCourseConfirmLoading = false
          this.$message.error(err.data.message || '结课失败')
        })
    },
    //结课记录
    classEendingList(data) {
      endingList(this.studentId, { course_id: data.course.id })
        .then((res) => {
          this.endList = res.data
          this.endListVisible = true
        })
        .catch((err) => {
          this.$message.error(err.data.message || '结课失败')
        })
    },
    //撤销结课
    cancelEndClass(data) {
      revokeEndCourse(this.studentId, { course_id: data.course.id, class_ending_id: data.id })
        .then((res) => {
          this.getcharge()
          this.endListVisible = false
        })
        .catch((err) => {
          this.$message.error(err.data.message || '撤销失败')
        })
    },
    //关闭弹窗
    endClassCancel() {
      this.endListVisible = false
    },
    changeFlag(e) {
      if (e.buy_start_time) {
        this.setStartDate = moment(e.buy_start_time)
      } else {
        this.setStartDate = undefined
      }

      console.log(this.setStartDate)
      e.autodate = null
      e.flag = true
      this.$forceUpdate()
    },
    changeFlagSubmit(e) {
      if (!buy_start_time && !e.autodate) {
        this.$message.success('请选择开始日期')
        return
      }
      let buy_start_time = JSON.parse(JSON.stringify(this.setStartDate))
      buy_start_time = moment(buy_start_time).format('YYYY-MM-DD')
      checkDateStatus({ order_content_id: e.id, buy_start_time: buy_start_time, buy_end_time: e.autodate })
        .then((res) => {
          if (res.status == 1) {
            setStartEndDate({ order_content_id: e.id, buy_start_time: buy_start_time, buy_end_time: e.autodate })
              .then((res) => {
                e.flag = false
                this.$forceUpdate()
                this.getcharge()
                this.$message.success('设置成功')
              })
              .catch((err) => {
                e.flag = false
                this.$forceUpdate()
                this.$message.error(err.data.message||'设置失败')
              })
          }
          if (res.status == 2) {
            this.$warning({
              title: '课程起止日期存在冲突',
              content: `此订单的课程起止日期与其他订单的日期（${res.conflict_start_time}~${res.conflict_end_time}）存在冲突，请重新修改`,
            })
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message||'请求失败')
        })
    },
    //设置起始日期
    setDate(record, e) {
      console.log(record)
      let surplus_class_time = Number(record.surplus_buy_number) + Number(record.surplus_give_number) - 1
      let date = moment(e).format('YYYY-MM-DD')
      record.autodate = moment(date).add(surplus_class_time, 'days').format('YYYY-MM-DD')
      this.$forceUpdate()
    },
    //清零
    clear(order_content_id, course_id) {
      let that = this
      that.$confirm({
        title: '确认课时清零吗?',
        content: '课时清零后，这些天数/课时将不能恢复',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          clearClassHour(that.$route.query.id, { order_content_id: order_content_id, course_id: course_id })
            .then((res) => {
              that.getcharge()
              that.$message.success('清零成功')
            })
            .catch((err) => {
              that.$message.error(err.data.message || '清零失败')
            })
        },
        onCancel() {},
      })
    },
    studentCancel() {
      this.studentVisible = false
      this.classconfirmLoading = false
    },

    studentOk() {
      seletedClass(this.$route.query.id, { class_ids: this.class_ids, course_id: this.course_id,status:1 })
        .then((res) => {
          this.classvisible = false
          this.classconfirmLoading = false
          this.studentVisible = false
          this.getcharge()
          this.$message.success('选班成功')
        })
        .catch((err) => {
          this.$message.error(err.data.message || '选班失败,请稍后再试')
          this.classconfirmLoading = false
        })
    },
    addConflictTest() {
      let student_ids = [this.$route.query.id]
      checkStudent({
        student_ids: student_ids,
        class_ids: this.class_ids,
      })
        .then((res) => {
          this.conflict = res.data
        })
        .catch((err) => {
          this.$message.error(err.data.message || '冲突查询失败')
        })
    },
    seletedClass() {
      this.classconfirmLoading = true
      if (this.class_ids.length == 0) {
        this.$message.warning('请选择班级')
        this.classconfirmLoading = false
        return
      }
      let student_ids = [this.$route.query.id]
      checkStudent({
        student_ids: student_ids,
        class_ids: this.class_ids,
      })
        .then((res) => {
          if (res.data.length > 0) {
            this.conflict = res.data
            this.studentVisible = true
          } else {
            this.studentOk()
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message || '冲突查询失败')
          this.classconfirmLoading = false
        })
    },

    classCancel() {
      this.classvisible = false
    },
    getClassList(course_id) {
      classList({
        school_id: this.$store.state.user.school,
        pageSize: 99999999,
        course_id: course_id,
        structures_id: this.structures_id,
      }).then((res) => {
        this.classlist = res.data
        this.classvisible = true
      })
    },
    goSelectClass(val) {
      this.structures_id = val.structures.id
      console.log(val)
      let class_id = []
      if (val.class.length > 0) {
        val.class.forEach((item) => {
          class_id.push(item.id)
        })
      }
      this.class_ids = class_id
      this.course_id = val.course.id
      this.getClassList(val.course.id)
    },
    clickHander() {
      this.$emit('changes', '4')
    },
    transformCourse(data) {
      this.studentInfo.couserInfo = { exceed: {} }

      this.studentInfo.couserInfo.structures_ids = []
      this.studentInfo.couserInfo.structures_ids.push(data.structures)
      this.studentInfo.couserInfo.exceed.sum_exceed_hour = data.sum_exceed_hour
      this.studentInfo.couserInfo.exceed.sum_exceed_time = data.sum_exceed_time
      // console.log(data.course.id)
      this.$router.push({
        name: 'transformCourse',
        query: {
          studentInfo: this.studentInfo,
          course: data.course,
          structures: data.structures,
        },
      })
    },
    returnCourse(data) {
      this.studentInfo.couserInfo = { exceed: {} }
      this.studentInfo.couserInfo.structures_ids = []
      this.studentInfo.couserInfo.structures_ids.push(data.structures)
      this.studentInfo.couserInfo.exceed.sum_exceed_hour = data.sum_exceed_hour
      this.studentInfo.couserInfo.exceed.sum_exceed_time = data.sum_exceed_time
      console.log(data.course.id)
      this.$router.push({
        name: 'returnCourse',
        query: {
          studentInfo: this.studentInfo,
          course: data.course,
          structures: data.structures,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .title-left {
    font-weight: bold;
  }
  .title-right {
    color: rgb(255, 255, 255);
    font-size: 12px;
    padding: 4px 10px;
    background: rgb(255, 117, 25);
    border-radius: 3px;
  }
}
.datas {
  max-height: 150px;
  background: rgb(255, 255, 255);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(232, 232, 232);
  border-image: initial;
  border-radius: 4px;
  padding: 16px;
  overflow: auto;
}
.ant-row-flex {
  display: flex;
  justify-content: space-between;
}
.course-item-box {
  border-bottom: none !important;
  border: 1px solid #e8e8e8;
  margin-bottom: 16px;
  .info-header {
    padding: 16px 24px;
    font-size: 14px;
    .info-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.wu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 32px 0;
  color: rgba(0, 0, 0, 0.25);
}
.mr8 {
  margin-right: 8px;
}
.end-courser-body {
  padding: 14px;
  margin-top: 12px;
  background-color: #fafafa;
  border-radius: 4px;
  line-height: 20px;
  div {
    .color-red {
      color: #ec4b35;
    }
  }
}
.active {
  color: #8e8e8e !important;
}
.end-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0 15px 12px;
  border-radius: 4px;
  max-height: 300px;
  overflow: auto;
}
</style>